<template>
  <view class="zcModifyMain">
    <view class="terminalBox">
      <text class="title" v-if="type == 'single'">单个设置--终端号</text>
      <view class="singleBox" v-if="type == 'single'">
        {{ singleInputValue.slice(0, -6)
        }}<text>{{ singleInputValue.slice(-6) }}</text>
      </view>
      <text class="title" v-if="type == 'multiple'">批量设置--终端号</text>
      <view class="multipleBox" v-if="type == 'multiple'">
        <view
          >{{ multipleInputValueStart.slice(0, -6)
          }}<text>{{ multipleInputValueStart.slice(-6) }}</text></view
        >
        <u-icon
          class="uIcon"
          name="arrow-downward"
          color="#fb4535"
          size="50"
        ></u-icon>
        <view
          >{{ multipleInputValueEnd.slice(0, -6)
          }}<text>{{ multipleInputValueEnd.slice(-6) }}</text></view
        >
      </view>
    </view>
    <u-form :model="form" ref="uForm" :error-type="['toast']">
      <u-form-item
        label="借记卡费率(%)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="dcpay"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.dcpay"
          input-align="right"
          :placeholder="placeholder.dcpay"
          @blur="inputBlurTap('dcpay')"
        />
      </u-form-item>
      <u-form-item
        label="借记卡封顶(元)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="dctop"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.dctop"
          input-align="right"
          :placeholder="placeholder.dctop"
          @blur="inputBlurTap('dctop')"
        />
      </u-form-item>
      <u-form-item
        label="贷记卡费率(%)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="ccpay"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.ccpay"
          input-align="right"
          :placeholder="placeholder.ccpay"
          @blur="inputBlurTap('ccpay')"
        />
      </u-form-item>
      <u-form-item
        label="银联扫码(%)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="cuppay"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.cuppay"
          input-align="right"
          :placeholder="placeholder.cuppay"
          @blur="inputBlurTap('cuppay')"
        />
      </u-form-item>
      <u-form-item
        label="支付宝扫码费率(%)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="alipay"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.alipay"
          input-align="right"
          :placeholder="placeholder.alipay"
          @blur="inputBlurTap('alipay')"
        />
      </u-form-item>
      <u-form-item
        label="微信扫码费率(%)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="wxpay"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.wxpay"
          input-align="right"
          :placeholder="placeholder.wxpay"
          @blur="inputBlurTap('wxpay')"
        />
      </u-form-item>
      <u-form-item
        label="T0手续费(元)"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="edit-pen"
        prop="t0"
      >
        <u-input
          class="r_input"
          :clearable="false"
          v-model="form.t0"
          input-align="right"
          :placeholder="placeholder.t0"
          @blur="inputBlurTap('t0')"
        />
      </u-form-item>
      <!-- <u-form-item
        label="选择产品"
        label-width="300"
        left-icon="arrow-right-double"
        right-icon="arrow-right"
      >
        <u-input
          @tap="productShow = true"
          :disabled="true"
          input-align="right"
          v-model="productValue.label"
          placeholder="请选择产品"
        />
      </u-form-item> -->
    </u-form>
    <u-button
      class="rButton"
      type="primary"
      :ripple="true"
      @tap="submitTap"
      :disabled="canClick"
      >确定提交</u-button
    >
    <u-select
      v-model="productShow"
      confirm-color="#fb4535"
      :list="productList"
      @confirm="productConfirm"
    >
    </u-select>
    <u-modal
      v-model="show"
      title="温馨提醒"
      content="您确定要设置政策吗？"
      @confirm="confirm"
      confirm-color="#fb4535"
      :show-cancel-button="true"
    ></u-modal>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      //接收值
      type: "",
      // productClassCode: "",
      singleInputValue: "",
      multipleInputValueStart: "",
      multipleInputValueEnd: "",
      singlePorductValue: "",
      multiplePorductValue: "",
      //表单相关
      placeholder: {
        dcpay: "", //借记卡费率
        dctop: "", //借记卡封顶
        ccpay: "", //贷记卡费率
        cuppay: "", //银联商务
        alipay: "", //支付宝扫码费率
        wxpay: "", //微信扫码费率
        t0: "", //t0手续费
      },
      feeCfgList: [],
      form: {
        dcpay: "", //借记卡费率
        dctop: "", //借记卡封顶
        ccpay: "", //贷记卡费率
        cuppay: "", //银联商务
        alipay: "", //支付宝扫码费率
        wxpay: "", //微信扫码费率
        t0: "", //t0手续费
      },
      //操作类
      show: false,
      productList: [],
      productShow: false,
      productValue: {
        label: "",
        value: "",
      },
      //表单验证
      rules: {
        dcpay: [
          {
            required: true,
            message: "请填写借记卡费率",
            trigger: ["change"],
          },
        ],
        dctop: [
          {
            required: true,
            message: "请填写借记卡封顶",
            trigger: ["change"],
          },
        ],
        ccpay: [
          {
            required: true,
            message: "请填写贷记卡费率",
            trigger: ["change"],
          },
        ],
        cuppay: [
          {
            required: true,
            message: "请填写银联扫码",
            trigger: ["change"],
          },
        ],
        alipay: [
          {
            required: true,
            message: "请填写支付宝扫码费率",
            trigger: ["change"],
          },
        ],
        wxpay: [
          {
            required: true,
            message: "请填写微信扫码费率",
            trigger: ["change"],
          },
        ],
        t0: [
          {
            required: true,
            message: "请填写t0手续费",
            trigger: ["change"],
          },
        ],
      },
      canClick: true,
    };
  },
  onLoad(options) {
    this.type = options.type;
    // this.productClassCode = options.productClassCode;
    this.singleInputValue = options.singleInputValue;
    this.multipleInputValueStart = options.multipleInputValueStart;
    this.multipleInputValueEnd = options.multipleInputValueEnd;
    this.singlePorductValue = options.singlePorductValue;
    this.multiplePorductValue = options.multiplePorductValue;
    this.getProductsByClassCodeTap();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },

  methods: {
    //获取分类
    getProductsByClassCodeTap() {
      let params = {};
      if (this.type == "single") {
        params.classCode = this.singlePorductValue;
      } else if (this.type == "multiple") {
        params.classCode = this.multiplePorductValue;
      }
      this.$u.api
        .getProductsByClassCode(params)
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.productList = datas;
            this.productValue = datas[0];
            this.getFeeCfgList();
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    //获取费率项配置
    getFeeCfgList() {
      let pramas = {
        productId: this.productValue.value,
      };
      this.$u.api
        .getFeeCfgList(pramas)
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.feeCfgList = datas;
            if (datas.length > 0) {
              datas.forEach((item) => {
                switch (item.code) {
                  case "dcpay":
                    this.placeholder.dcpay = `请输入${item.min}-${item.max}`;
                    break;
                  case "dctop":
                    this.placeholder.dctop = `请输入${item.min}-${item.max}`;
                    break;
                  case "ccpay":
                    this.placeholder.ccpay = `请输入${item.min}-${item.max}`;
                    break;
                  case "cuppay":
                    this.placeholder.cuppay = `请输入${item.min}-${item.max}`;
                    break;
                  case "alipay":
                    this.placeholder.alipay = `请输入${item.min}-${item.max}`;
                    break;
                  case "wxpay":
                    this.placeholder.wxpay = `请输入${item.min}-${item.max}`;
                    break;
                  case "t0":
                    this.placeholder.t0 = `请输入${item.min}或者${item.max}`;
                    break;
                }
              });
            }
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    //验证最大最小
    inputBlurTap(type) {
      this.canSubmit();
      let datas = this.feeCfgList;
      if (datas.length > 0) {
        datas.forEach((item) => {
          if (item.code == type) {
            let currentValue = this.form[type];
            if (this.$u.trim(currentValue, "all") != "") {
              if (currentValue * 1000 > item.max * 1000 && type != "t0") {
                this.$refs.uToast.show({
                  title: `不能超过${item.max}`,
                  type: "error",
                  duration: 1200,
                });
                this.form[type] = "";
                return;
              }
              if (currentValue * 1000 < item.min * 1000 && type != "t0") {
                this.$refs.uToast.show({
                  title: `不能低于${item.min}`,
                  type: "error",
                  duration: 1200,
                });
                this.form[type] = "";
                return;
              }
              if (
                currentValue != item.max &&
                currentValue != item.min &&
                type == "t0"
              ) {
                this.$refs.uToast.show({
                  title: `t0手续费只限输入${item.min}或者${item.max}`,
                  type: "error",
                  duration: 1200,
                });
                this.form[type] = "";
                return;
              }
            }
          }
        });
      }
    },
    // 判断是否可以提交
    canSubmit() {
      setTimeout(() => {
        if (
          this.form.dcpay &&
          this.form.dctop &&
          this.form.ccpay &&
          this.form.cuppay &&
          this.form.alipay &&
          this.form.wxpay &&
          this.form.t0
        ) {
          this.canClick = false;
        } else {
          this.canClick = true;
        }
      });
    },
    //提交操作
    submitTap() {
      this.canSubmit();
      setTimeout(() => {
        if (this.canClick == false) {
          this.$refs.uForm.validate((valid) => {
            if (valid) {
              this.show = true;
            }
          });
        } else {
          this.canClick = true;
        }
      }, 300);
    },
    productConfirm(e) {
      this.productValue = e[0];
      this.getFeeCfgList();
    },
    //提交
    confirm() {
      let param = {
        productId: this.productValue.value,
        feeList: JSON.stringify(this.form),
      };
      if (this.type == "single") {
        param.startSn = this.singleInputValue;
        param.endSn = this.singleInputValue;
      } else if (this.type == "multiple") {
        param.startSn = this.multipleInputValueStart;
        param.endSn = this.multipleInputValueEnd;
      }
      this.$u.api
        .batchSetSnFee(param)
        .then((res) => {
          if (res.status == 200) {
            this.$refs.uToast.show({
              title: "设置成功",
              type: "success",
            });
            setTimeout(() => {
              this.$u.route({
                url: "/pages/sy/sy",
                type: "switchTab",
              });
            }, 1500);
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}

.zcModifyMain {
  padding: 30rpx;

  .terminalBox {
    box-shadow: 0 0 10rpx rgb(230, 230, 230);
    padding: 30rpx;
    border-radius: 14rpx;
    margin-bottom: 26rpx;
    text-align: center;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }

    .singleBox {
      font-family: "din-font";
      font-weight: bold;
      color: #010101;
      font-size: 50rpx;
      margin-top: 10rpx;

      text {
        color: #fb4535;
        margin-left: 10rpx;
      }
    }

    .multipleBox {
      font-family: "din-font";
      font-weight: bold;
      color: #010101;
      font-size: 50rpx;
      margin-top: 10rpx;

      > view {
        text {
          color: #fb4535;
          margin-left: 10rpx;
        }
      }

      .uIcon {
        display: block;
        margin: 0 auto;
        width: 50rpx;
      }
    }
  }

  .r_input {
    color: #fb4535;
    font-weight: bold;
  }

  .rButton {
    width: 80%;
    margin-top: 60rpx;
    background: #fb4535;
    height: 70rpx;
    line-height: 70rpx;
  }
}
</style>
